<template>
  <div class="box">
    <div class="conter">
      <h2>注册账号</h2>
      <span>亲,&nbsp;&nbsp;&nbsp; 欢迎注册淘宝账号</span>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="手机号"
          placeholder="请输入手机号 "
          :rules="[{ validator:validateName, required: true , message: '请输入正确的手机号'}]"
        />
        <van-field
          v-model="password"
          type="password"
          name="validatePass"
          label="密码"
          placeholder="密码"
          :rules="[{ validator:validatePass , required: true, message: '密码不正确，请重新输入' }]"
        />

        <van-field
          v-model="passwords"
          type="password"
          name="确定密码"
          label="确定密码"
          placeholder="确定密码"
          :rules="[{validator:validatePass2, required: true, message: '密码不一致，请重新输入'}]"
        />
        <p class="t_login">
          已有账号 去
          <span @click="goLogin">登录</span>
        </p>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">同意协议并注册</van-button>
          <!-- @click.stop="submit()" -->
        </div>
      </van-form>

      <div class="footer">
        <van-field name="checkbox">
          <template #input>
            <van-checkbox v-model="checkbox" shape="square" />
          </template>
        </van-field>
        <div class="footer-l">
          <p>已阅读并同意以下协议</p>
          <a href="###">淘宝平台服务协议</a>
          <a href="###">隐私权政策</a>
          <a href="###">法律声明</a>
          <a href="###">支付宝及客户端服务协议</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import indexApi from "@/api/indexApi"; //引入接口
export default {
  data() {
    return {
      checkbox: false,
      username: "",
      password: "",
      passwords: ""
    };
  },
  components: {},
  methods: {
    //用户名验证
    async validateName(val) {
      // Toast.loading("验证中...");
      if (!/^1[3|4|5|7|8]\d{9}$/.test(val)) {
        return false;
      } else {
        let p = await indexApi.checkName(this.username);
        if (p.data.flag) {
        } else {
          this.$notify({
            type: "warning",
            message: "用户名已存在，请重新输入"
          });
        }
      }
    },
    // 密码验证
    validatePass(val) {
      return /^\d{6,18}$/.test(val);
    },
    // 确定密码验证
    validatePass2(val) {
      if (this.password !== this.passwords || this.password === "") {
        return false;
      }
    },

    async onSubmit(val) {
      try {
        if (this.checkbox !== true) {
          this.$notify({ type: "warning", message: "请阅读并勾选以下协议" });
        } else {
          console.log(this.username, this.password);
          let psw = this.$md5(this.password);
          let p = await indexApi.reg(this.username, psw);
          console.log(p);
          if (p.data.flag) {
            this.$notify({ type: "success", message: "恭喜你注册成功" });
            this.$router.push({
              path: "/login",
              query: { name: this.username }
            });
          } else {
            this.$notify({ type: "warning", message: "注册失败" });
          }
        }
      } catch (err) {
        console.log(err);
      }
    },

    goLogin() {
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped lang="scss">
/* 头顶登录 */
.t_login {
  float: right;
  font-size: 12px;
  color: #999;
  margin: 10px 10px 0 0;
  span {
    font-size: 14px;
    color: #ff5000;
  }
}

.conter {
  padding: 40px 30px;
}

.conter > h2 {
  margin-top: 20px;
  font-size: 30px;
  color: #333;
}
.conter > span {
  line-height: 40px;
  margin-top: 12px;
  font-size: 16px;
  color: #999;
}

.van-form {
  margin-top: 50px;
}
.van-button {
  margin: 50px 0;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#f90),
    to(#ff5000)
  );
  background-image: -webkit-linear-gradient(left, #f90, #ff5000);
  background-image: -o-linear-gradient(left, #f90, #ff5000);
  background-image: linear-gradient(90deg, #f90, #ff5000);
  border: none;
  border-radius: 24px;
  height: 45px;
}

/* 底部 */

.footer-l {
  position: relative;
  left: 50px;
  bottom: 35px;
  width: 290px;
}
.footer-l > p {
  float: left;
  color: #999;
  font-size: 12px;
  line-height: 20px;
}
.footer-l > a {
  display: inline-block;
  margin-right: 10px;
  color: #ff5000;
  font-size: 12px;
  line-height: 20px;
}
</style>